<template>
  <l-dialog
    :title="$t(title)"
    :visible.sync="midVisible"
    :hasBtns="false"
    width="424px"
    @close="closeDialog"
    @opened="handleOpened"
    @ok="okDialog"
  >
    <div class="l-rblock" style="padding: 8px 32px 0 32px; overflow: auto">
      <div style="padding-bottom:8px;" v-if="excelAreas"  >
        <el-button type="primary" size="mini" @click="handleDownScheme">{{
          $t("下载模版")
        }}</el-button>
      </div>
      <el-upload
        drag
        action
        :http-request="myChunkedUpload"
        multiple
        ref="myupload"
        accept=".xls,.xlsx"
        :data="param"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </div>
  </l-dialog>
</template>

<script>
import chunkedUpload from "../../../../util/chunkedUpload";
export default {
  name: "l-excel-import",
  props: {
    classname: String,
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "Excel文件导入",
    },
    excelAreas: Array,
  },
  data() {
    return {
      folderId: "",
    };
  },
  created() {
    this.folderId = this.$uuid();
  },
  mounted() {},
  computed: {
    midVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
    param() {
      return {
        folderId: this.folderId,
      };
    },
  },
  methods: {
    closeDialog() {
      this.$refs.myupload.clearFiles;
    },
    handleOpened() {},
    okDialog() {
      this.midVisible = false;
    },
    myChunkedUpload(option) {
      chunkedUpload(option, (data) => {
        const api = window.$api.excel.import;
        data.excelAreas = this.excelAreas;
        return api.uploadEx(this.classname, data);
      });
    },
    handleDownScheme() {
        this.lr_downFile("excel/import/schemeId",`${this.title}模版`,{excelAreas:this.excelAreas})
    },
  },
};
</script>
